<!-- 撤回订单弹框 -->
<template>
  <el-dialog title="撤回订单" top="0" :visible.sync="dialogVisible" :close-on-click-modal="false"
    @open="openDialog" @close="closeDialog" width="80%" class="recall-order-dialog">
    <div class="recall-order">
      <div class="recall-order__title">当前定向云币数量：
        <el-link type="danger">{{ merchantDirectedIntegral }}</el-link>
      </div>
      <div class="recall-order__form">
        <el-form :inline="true" :model="formInline" class="demo-form-inline" @keyup.enter.native="search()"
          id="orderSearchForm">
          <el-form-item label="订单编号">
            <br />
            <el-input v-model="formInline.orderNo" placeholder style="margin-left:-70px;width:200px"></el-input>
          </el-form-item>
          <el-form-item label="商品名称">
            <br />
            <el-input v-model="formInline.goodsName" placeholder style="margin-left:-70px;width:200px"></el-input>
          </el-form-item>
          <el-form-item label="订单状态">
            <br />
            <el-select v-model="formInline.orderStatus" placeholder="请选择" clearable style="margin-left:-70px">
              <el-option v-for="(item, i) in orderStatusList" :key="i" :value="item.id" :label="item.name"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="下单时间">
            <br />
            <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
              end-placeholder="结束日期" value-format="yyyy-MM-dd" :picker-options="pickerOptions"
              style="margin-left: -70px;" />
          </el-form-item>
          <el-form-item class="recall-order__form--btn">
            <el-button type="primary" @click="search()" size="mini" icon="el-icon-search">查询</el-button>
            <el-button type="primary" @click="kong()" size="mini" icon="el-icon-delete">清空</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div class="recall-order__table">
        <el-table :data="tableData" :header-cell-style="{ background: '#eef1f6', color: '#606266' }" border
          v-loading="loading" class="order-table" height="460px">
          <el-table-column type="index" label="序号" align="center" width="60"></el-table-column>
          <el-table-column label="订单编号" prop="orderNo" width="135px"></el-table-column>
          <el-table-column label="收货人手机号" prop="postPersonTel" width="115px"></el-table-column>
          <el-table-column label="收货人姓名" prop="postPerson" width="100px"></el-table-column>
          <el-table-column label="收货地址" prop="postAddress" width="200px"></el-table-column>
          <el-table-column label="订单金额" prop="totalMoney"></el-table-column>
          <el-table-column label="商品名称" prop="goodsNames" width="150px"></el-table-column>
          <el-table-column label="商品数量" prop="totalAmount"></el-table-column>
          <el-table-column label="使用云币">
            <template slot-scope="scope">
              {{ scope.row.totalMoney - scope.row.receivedMoney }}
            </template>
          </el-table-column>
          <el-table-column label="实付款" prop="receivedMoney"></el-table-column>
          <el-table-column label="店铺名称" prop="storeName"></el-table-column>
          <el-table-column label="支付类型">
            <template slot-scope="scope">
              {{ payTypeEnum[scope.row.payMethod] ? payTypeEnum[scope.row.payMethod] : '未知' }}
            </template>
          </el-table-column>
          <el-table-column label="订单状态" prop="orderStatus">
            <template slot-scope="scope">
              {{orderStatusList.find((item) => item.id == scope.row.orderStatus) ? orderStatusList.find((item) =>
                item.id == scope.row.orderStatus).name : '未知'}}
            </template>
          </el-table-column>
          <el-table-column  v-if="isWithdraw"  label="操作" align="center" fixed="right" width="60">
            <template slot-scope="scope">
              <el-button type="text" size="mini" @click="recallHandle(scope.row)">撤回</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="block">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 30, 50, 100, 150, 200]" :current-page="listQuery.current" :page-size="listQuery.size"
          layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </div>

    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { queryOrderExchange, exchangeOrderCanceled, queryStoreMerchantIntegral } from '@/api/exchangeOrder';
export default {
  props: {
    show: { type: Boolean, default: false },
    authCode: { type: String, default: '' },
    orgSeq: { type: String, default: '' },
  },
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: '最近3天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
              picker.$emit('pick', [start, end]);
            },
          },
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            },
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            },
          },
        ],
      },
      loading: false,
      merchantDirectedIntegral: 0,
      formInline: {
        orderNo: '',
        memberName: '',
        memberPhone: '',
        goodsName: '',
        orderStatus: '1',
        beginDate: '',
        endDate: '',
      },
      dateRange: [],
      tableData: [],
      total: 0,
      listQuery: {
        current: 1,
        size: 100,
      },
      // 订单状态
      orderStatusList: [
        // {
        //   id: '0',
        //   name: '待支付',
        // },
        {
          id: '1',
          name: '待发货',
        },
        {
          id: '2',
          name: '待收货',
        },
        {
          id: '3',
          name: '已完成',
        },
        // {
        //   id: '4',
        //   name: '已取消',
        // },
        // {
        //   id: '-1',
        //   name: '已退款',
        // },
      ],
      // 付款方式
      payTypeEnum: {
        1: '现金支付',
        2: '货到付款',
        3: '线上支付',
        102: '酒币支付',
        105: '云币支付'
      },
      // 是否能撤回
      isWithdraw: false
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.show;
      },
      set(val) {
        this.$emit('update:show', val);
      },
    },
  },

  methods: {
    openDialog() {
      if (!this.authCode) {
        this.$message.error('店铺授权码不能为空');
        return
      }
      this.getList();
      this.getTotal();
    },
    getTotal() {
      queryStoreMerchantIntegral({orgSeq: this.orgSeq}).then(res => {
        if (res.code == 1) {
          if(res.result.merchantDirectedIntegral < 0) {
            this.isWithdraw = true
          } else {
            this.isWithdraw = false
          }
          this.merchantDirectedIntegral = res.result.merchantDirectedIntegral
        } else {
          this.$message.error(res.message || '获取定向云币数量失败');
        }
      })
    },
    search() {
      this.listQuery.current = 1;
      this.getList();
    },
    getList() {
      if (this.dateRange.length > 0) {
        this.formInline.beginDate = this.dateRange[0];
        this.formInline.endDate = this.dateRange[1];
      } else {
        this.formInline.beginDate = '';
        this.formInline.endDate = '';
      }

      const data = {
        size: this.listQuery.size,
        current: this.listQuery.current,
        condition: {
          ...this.formInline,
          authCode: this.authCode,
          isDirectedExchange: 1,
          exchangeType: 3,
        },
        ascs: [],
        descs: [],
      }
      this.loading = true
      queryOrderExchange(data).then(res => {
        this.tableData = res.records;
        this.total = res.total;
      }).finally(() => {
        this.loading = false
      })
    },
    kong() {
      this.formInline = this.$options.data().formInline;
    },
    handleSizeChange(val) {
      this.listQuery.size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.current = val;
      this.getList();
    },
    closeDialog() {
      this.dialogVisible = false;
      this.$emit('refresh');
    },
    recallHandle(row) {
      this.$confirm('确认撤回?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true;
            instance.confirmButtonText = '提交中...';
            exchangeOrderCanceled({
              orderId: row.uuid
            }).then((res) => {
              if (res.code == 1) {
                this.$message.success(res.message || '撤回成功');
                this.getList();
                this.getTotal();
              } else {
                this.$message.error(res.message || '撤回失败');
              }
            }).finally(() => {
              instance.confirmButtonLoading = false;
              done();
            })
          } else {
            done();
          }
        }
      })
    },
  }
}
</script>

<style>
.recall-order-dialog {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.recall-order-dialog .el-dialog {
  margin: 0;
}
</style>
<style lang="scss" scoped>
.recall-order {
  max-height: 700px;
  overflow: auto;

  &__form {
    &--btn {
      margin-top: 40px;
    }
  }

  &__table {
    /deep/ .demo-form-inline {
      padding: 0 10px 0px 0;
    }


    /deep/ .order-table {

    }
  }
}
</style>